<template>
  <div>
    <div style="background-color: lightblue;height: 180px">
    <el-row style="background-color: #f7f8fB;line-height: 40px;color: #999999;font-size: 16px">
      <el-col :span="2" :offset="3"><i class="el-icon-s-home" style="font-size: 18px"></i>&nbsp;<span @click="shou">商城首页</span></el-col>
      <el-col :span="1" :offset="11">异议反馈</el-col>
      <el-col :span="1"><i class="el-icon-phone-outline">客户服务</i></el-col>
      <el-col :span="1">我的商城</el-col>
      <el-col :span="1">消息推送</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3">
        <img src="../img/goodsLogo.png" style="width: 350px;margin-left: 10px;margin-top: 10px">
      </el-col>
      <el-col :span="4" :offset="2" style="margin-top: 30px">
        <el-input placeholder="请输入内容" style="width: 500px;" v-model="sou">
          <template slot="append">
            <el-button style="background-color: #3b99fc;color: white;border-radius: 0;width: 90px;font-size: 16px" @click="chazhao">搜索</el-button>
          </template>
        </el-input>
        <br><br>
        <a style="color: #666666">德玛仕厨房设备</a>
        <a style="color: #666666;margin-left: 20px">全棉时代女工卫生用品</a>
      </el-col>
      <el-col :span="4" :offset="3">
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="gouwu">我的购物车
          <el-badge :value="numberAll" class="item"></el-badge></el-button>
        <el-button style="background-color: #f7f8fb;border-radius: 20px;margin-top: 35px;width: 150px;height: 45px" @click="TiaoOrder">我的订单</el-button>
      </el-col>
    </el-row>
    </div>
    <el-row style="width: 1200px;background-color: #f5f5f5;height: 60px;margin-top: 30px;margin-left: 400px;;">
      <el-col :span="1" :offset="1">
        <el-button :class="buttonClassOne" @click="zo">综合</el-button>
        <el-button :class="buttonClassTwo" @click="shen" id="shen">价格升序</el-button>
        <el-button :class="buttonClassThree" @click="jiang" id="jiang">价格降序</el-button>
      </el-col>
      <el-col :span="2" :offset="6">
        <el-input style="margin-top: 11px" v-model="one" @change="shai">
          <template slot="prefix">
            <span style="font-size: 20px;line-height: 42px;color: red" >￥</span>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" style="margin-top: 21px">
        <span>—</span>
      </el-col>
      <el-col :span="2">
        <el-input style="margin-top: 11px"  v-model="two" @change="shai">
          <template slot="prefix"><span style="font-size: 20px;line-height: 42px;color: red" >￥</span></template>
        </el-input>
      </el-col>
    </el-row>
    <el-empty description="没有找到搜索的商品信息哦" v-if="findAllList.length==0">
    </el-empty>
    <el-row v-else style="width: 1200px;background-color:#f5f5f5;margin-top: 20px;margin-left: 400px">
      <el-col :span="12"  v-for="all in findAllList" style="margin-top: 40px">
        <el-col :span="12" :offset="1">
          <div :key="all.id" style="position:relative;background-color: #5199FD;z-index: 5; width:280px; height:280px;" @mouseover="jin($event)" @click="item(all.goodsId)">
            <img :src="all.goodsPic1" width="280px" height="280px" @mouseleave="li($event)">
          </div>
        </el-col>
        <el-row style="font-size: 20px;">
          <span style="font-weight: 600;display: block;text-align: left;">商品名称:</span><span>{{all.goodsName}}</span><br><br>
          <span style="font-weight: 600;display: block;text-align: left">商品价格:</span><span style="color: red">{{all.goodsPrice}}/￥</span><br><br>
          <span style="font-weight: 600;display: block;text-align: left">商品描述:</span><br><span style="text-indent: 40px;display: block;text-align: left">{{all.goodsInfo}}</span>
        </el-row>
      </el-col>
    </el-row>
    <div>
      <img src="../img/goods/di.png" style="margin-top: 30px;width: 2000px;border:3px solid #99a9bf">
    </div>
  </div>
</template>

<script>
export default {
  name: "goodsList",
  data(){
    return{
      one:'',
      two:'',
      sou:'',
      sid:1,
      findAllList:{},
      findAllListLike:{},
      beforeFindAllList:{},
      buttonClassOne: 'normal-button-One',
      buttonClassTwo: 'normal-button-Two',
      buttonClassThree: 'normal-button-Three',
      numberAll:0
    }
  },
  methods:{
    findAll(){
      this.$axios.get("/goods/selectBySortIdAndOne",{params:{sid:this.sid}}).then(res=>{
        this.findAllList = res.data.data
        this.beforeFindAllList = res.data.data
        if (this.findAllList.length ==0)
          this.findAllList = this.findAllListLike
      })
    },
    chazhao(){
      if (this.sou==''){
        return
      }
      this.$axios.get('/goods/selectLike',{params:{src:this.sou}}).then(res=>{
        this.findAllList = res.data.data
      })
    },
    gouwu(){
      this.$router.push('/goodsCart')
    },
    zo(){
      this.one = '';
      this.two = '';
      this.buttonClassOne='normal-button-One';
      this.buttonClassTwo='normal-button-Two';
      this.buttonClassThree='normal-button-Three';
      this.findAllList = this.findAll()
    },
    shen(){
        this.buttonClassOne='loading-button-One';
        this.buttonClassTwo='loading-button-Two';
        this.buttonClassThree='normal-button-Three';
        this.findAllList.sort((a,b)=>(a.goodsPrice>b.goodsPrice)?1:-1)
    },
    jiang(){
      this.buttonClassOne='loading-button-One';
      this.buttonClassTwo='normal-button-Two';
      this.buttonClassThree='loading-button-Three';
      this.findAllList.sort((a,b)=>(a.goodsPrice<b.goodsPrice)?1:-1)
    },
    quanju(){
      this.$axios.get('/cart/findAllByUid').then(res=>{
        this.numberAll = res.data.data.length
      })
    },
    shai(){
      var findAllList = this.beforeFindAllList
      if (this.two == '')
        return;
      this.findAllList = findAllList.filter(item => item.goodsPrice >= this.one && item.goodsPrice <= this.two);
    },
    item(id){
      this.$router.push({path:'/goodsItem',query:{key:id}})
    },
    jin(event){
      const hoveredElement = event.target;
      hoveredElement.style.border='3px solid red'
    },
    li(event){
      const hoveredElement = event.target;
      hoveredElement.style.border='none'
    },
    shou(){
      this.$router.push('/goods')
    },
    TiaoOrder(){
      this.$router.push('/goodsOrder')
    },
  },
  mounted() {
    this.sid=this.$route.query.key
    this.findAllListLike = this.$route.query.data
    this.findAll()
    this.quanju()
  }
}
</script>

<style scoped>
.normal-button-One{
  margin-top: 10px;font-size: 16px;color: white;background-color: #5199FD
}
.loading-button-One{
  margin-top: 10px;font-size: 16px;color: black;background-color: white;
}
.normal-button-Two{
  margin-left: 90px;font-size: 16px;display: flow;margin-top: -42px;color: black;background-color: white;
}
.loading-button-Two{
  margin-left: 90px;font-size: 16px;display: flow;margin-top: -42px;color: white;background-color: #5199FD
}
.normal-button-Three{
  margin-left: 210px;font-size: 16px;display: flow;margin-top: -42px;color: black;background-color: white;
}
.loading-button-Three{
  margin-left: 210px;font-size: 16px;display: flow;margin-top: -42px;;color: white;background-color: #5199FD
}
</style>
